// 导航
$(document).ready(function(){
	$("nav div").click(function(){
		if($("nav").css("left") == "-300px") {
			$("nav").animate({left: "0"}, 1000);
			$("body").animate({marginLeft: "600px"}, 1000)
		}
		else {
			$("nav").animate({left: "-300px"}, 1000);
			$("body").animate({marginLeft: "0"}, 1000)
		}
	});
});


// 鼠标移入移出缩略图是的效果
$(document).ready(function(){
	$("li").mouseover(function(){
		$(this).children("a").children("img").hide();
		$(this).children("a").children("h2").show();
	});
	$("li").mouseleave(function(){
		$(this).children("a").children("img").show();
		$(this).children("a").children("h2").hide();
	});
});
// 鼠标点击缩略图弹出遮罩的效果
$(document).ready(function(){
	$(".img-link").click(function(){
		$("#gallery").show();
		return false;
	});

	$("#close").click(function(){
		$("#gallery").css("display", "none");
	});

	$("#gallery img").click(function(){
		$("#gallery").css("display", "none");
	});

	$(".img-link").click(function(){
		var source = $(this).attr("href");
		$("#pic").attr("src", source);
	});

// 下一张图片
$("#img-forward").click(function(){
	var imagegroup = $("#thumbnail li");                    //选择所有li元素
	for(var i = 0; i < imagegroup.length; i++) {
		var imagelink = imagegroup.eq(i).children("a");     //将循环中的li元素的子元素a对象赋给imagelink
		var piclink = $("#pic").attr("src");  			    //讲弹出的遮罩层中的图片的src属性赋给piclink
		if (imagelink.attr("href") == piclink) {		    //如果循环中的a元素的href属性和遮罩层中图片的src属性相等
			var index = imagegroup.eq(i).index() + 1;		//获取包含这个a元素的li元素的索引并加1
			var address = imagegroup.eq(index).children("a").attr("href");		//获取下一个li元素里的a元素的href属性
			$("#pic").attr("src", address);					//将其赋给遮罩层的新src，完成切换到下一张图片的操作
			break;											//操作完成，跳出循环，否则会直接切换到最后一张图片
		}
	}			
});
//上一张图片
$("#img-backward").click(function(){
	var imagegroup = $("#thumbnail li");                    //选择所有li元素
	for(var i = 0; i < imagegroup.length; i++) {
		var imagelink = imagegroup.eq(i).children("a");     //将循环中的li元素的子元素a对象赋给imagelink
		var piclink = $("#pic").attr("src");  			    //讲弹出的遮罩层中的图片的src属性赋给piclink
		if (imagelink.attr("href") == piclink) {		    //如果循环中的a元素的href属性和遮罩层中图片的src属性相等
			var index = imagegroup.eq(i).index() - 1;		//获取包含这个a元素的li元素的索引并减1
			var address = imagegroup.eq(index).children("a").attr("href");		//获取下一个li元素里的a元素的href属性
			$("#pic").attr("src", address);					//将其赋给遮罩层的新src，完成切换到下一张图片的操作
			break;											//操作完成，跳出循环，否则会直接切换到最后一张图片
		}
	}			
});
});

